<template>
  <div class="show">
    <!-- 头部搜索 -->
    <div class="search">
      <el-row>
        <el-col :span="20">
          <div class="grid-content bg-purple">
            <el-select v-model="option" placeholder="所有报修类型">
              <el-option
                v-for="(item, index) in TypeOptions"
                :key="index"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
            <el-input
              v-model="input"
              placeholder="输入你想搜索的报修订单描述信息"
              clearable
            ></el-input>
            <el-button plain @click="searchOrder">搜索</el-button>
          </div>
        </el-col>
      </el-row>
    </div>
    <!-- 表格 -->
    <el-table :data="fuzzySearchInfos" style="width: 100%" border stripe>
      <el-table-column
        align="center"
        type="index"
        label="#"
        width="40"
      ></el-table-column>
      <el-table-column
        align="center"
        prop="repairID"
        label="维修编号"
      ></el-table-column>
      <el-table-column
        align="center"
        prop="repairType"
        label="维修类型"
      ></el-table-column>
      <el-table-column
        align="center"
        prop="contactName"
        label="联系人"
        width="150"
      ></el-table-column>
      <el-table-column
        align="center"
        prop="contactPhone"
        label="联系人电话"
      ></el-table-column>
      <el-table-column
        align="center"
        prop="status"
        label="安排状态"
      ></el-table-column>
      <el-table-column
        align="center"
        prop="worker_name"
        label="维修师傅"
      ></el-table-column>
      <el-table-column align="center" label="操作" width="250">
        <template v-slot="scope">
          <!-- 查看详情-->
          <el-tooltip
            class="item"
            effect="dark"
            content="查看详情"
            placement="top"
            :enterable="false"
          >
            <el-button
              type="info"
              icon="el-icon-message"
              circle
              @click="showDetail(scope.row)"
            ></el-button>
          </el-tooltip>
          <!-- 安排师傅 -->
          <el-tooltip
            class="item"
            effect="dark"
            content="安排师傅"
            placement="top"
            :enterable="false"
          >
            <el-button
              type="primary"
              icon="el-icon-edit"
              circle
              @click="arrangeWorkerDetail(scope.row)"
            ></el-button>
          </el-tooltip>
          <!-- 已完成 -->
          <el-tooltip
            class="item"
            effect="dark"
            content="已完成"
            placement="top"
            :enterable="false"
          >
            <el-button
              type="success"
              icon="el-icon-check"
              circle
              @click="finishOrder(scope.row)"
            ></el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>

    <!-- 查看详情对话框 -->
    <el-dialog title="查看详情" :visible.sync="checkRepairInfoDialog">
      <el-form :model="checkInfoForm">
        <el-form-item label="维修订单编号" :label-width="formLabelWidth">
          <el-input
            v-model="checkInfoForm.repairID"
            autocomplete="off"
            disabled
          ></el-input>
        </el-form-item>
        <el-form-item label="维修类型" :label-width="formLabelWidth">
          <el-input
            v-model="checkInfoForm.repairType"
            autocomplete="off"
            disabled
          ></el-input>
        </el-form-item>
        <el-form-item label="报修详情" :label-width="formLabelWidth">
          <el-input
            v-model="checkInfoForm.repairDetail"
            autocomplete="off"
            disabled
          ></el-input>
        </el-form-item>
        <el-form-item label="报修地点" :label-width="formLabelWidth">
          <el-input
            v-model="checkInfoForm.repairPlace"
            autocomplete="off"
            disabled
          ></el-input>
        </el-form-item>
        <el-form-item label="报修时间" :label-width="formLabelWidth">
          <el-input
            v-model="checkInfoForm.createTime"
            autocomplete="off"
            disabled
          ></el-input>
        </el-form-item>
        <el-form-item label="报修人姓名" :label-width="formLabelWidth">
          <el-input
            v-model="checkInfoForm.contactName"
            autocomplete="off"
            disabled
          ></el-input>
        </el-form-item>
        <el-form-item label="报修人电话" :label-width="formLabelWidth">
          <el-input
            v-model="checkInfoForm.contactPhone"
            autocomplete="off"
            disabled
          ></el-input>
        </el-form-item>
        <el-form-item label="维修状态" :label-width="formLabelWidth">
          <el-input
            v-model="checkInfoForm.status"
            autocomplete="off"
            disabled
          ></el-input>
        </el-form-item>
        <el-form-item label="维修师傅工号" :label-width="formLabelWidth">
          <el-input
            v-model="checkInfoForm.workID"
            autocomplete="off"
            disabled
          ></el-input>
        </el-form-item>
        <el-form-item label="维修师傅名" :label-width="formLabelWidth">
          <el-input
            v-model="checkInfoForm.worker_name"
            autocomplete="off"
            disabled
          ></el-input>
        </el-form-item>
        <el-form-item label="师傅联系方式" :label-width="formLabelWidth">
          <el-input
            v-model="checkInfoForm.worker_phone"
            autocomplete="off"
            disabled
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="checkRepairInfoDialog = false">取 消</el-button>
        <el-button type="primary" @click="checkRepairInfoDialog = false"
          >确 定</el-button
        >
      </div>
    </el-dialog>

    <!-- 安排师傅对话框 -->
    <el-dialog title="安排维修师傅" :visible.sync="arrangeWorkerDialog">
      <el-form :model="arrangeWorkForm">
        <el-form-item label="维修师傅工号" :label-width="formLabelWidth" v-if="arrangeWorkForm.workerID">
          <el-tag type="info">{{arrangeWorkForm.workerID}}</el-tag>
        </el-form-item>
        <el-form-item label="选择师傅" :label-width="formLabelWidth">
          <el-select v-model="arrangeWorkForm.workerName" placeholder="请选择维修师傅">
            <el-option 
            v-for="worker in workerInfos"
            :key="worker.workerID" 
            :value="worker.workerName"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="维修师傅电话" :label-width="formLabelWidth" v-if="arrangeWorkForm.workerPhone">
          <el-tag type="info">{{arrangeWorkForm.workerPhone}}</el-tag>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="arrangeWorkerDialog = false">取 消</el-button>
        <el-button type="primary" :plain="true" @click="sendWorkerInfo">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "show",
  data() {
    return {
      // 报修类型有:
      TypeOptions: ["照明故障", "电器故障", "供水故障", "设备故障", '灯泡故障', ''],
      // 搜索 选择的类型
      option: "",
      // 输入的搜索内容
      input: "",
      // 维修信息
      repairInfos: [],
      // 模糊查询的维修信息:
      fuzzySearchInfos: [],
      // 维修师傅信息:
      workerInfos: [],
      // 维修状态信息
      status: 0,
      // 查看详情对话框是否出现
      checkRepairInfoDialog: false,
      // 控制安排师傅对话框是否出现
      arrangeWorkerDialog: false,
      // 查看详情表单数据
      checkInfoForm: {
        contactName: "",
        contactPhone: "",
        createTime: "",
        repairDetail: "",
        repairID: "",
        repairPlace: "",
        repairType: "",
        status: "",
        workID: "",
        worker_name: "",
        worker_phone: "",
      },
      // 安排师傅的表单数据
      arrangeWorkForm: {
        repairID: '',
        workerID: '',
        workerName: '',
        workerPhone: ''
      },
      // 完成订单的返回数据
      finishOrderForm: {
        repairID: '',
        workerID: ''
      },
      formLabelWidth: "120px",
    };
  },
  created() {
    this.getRepairInfos();
    this.getLeisureWorkers();
  },
  methods: {
    // 获取维修信息
    getRepairInfos() {
      this.axios.get("/api/api_1_0//repairInfo/getArrangementInfo").then(
        (response) => {
          if (response.data.code === "2000") {
            this.repairInfos = response.data.data;
            this.fuzzySearchInfos = response.data.data;
            for (let i = 0; i < this.repairInfos.length; i++) {
              if (this.repairInfos[i].status === 0) {
                this.repairInfos[i].status = "未分配师傅";
              } else if (this.repairInfos[i].status === 1) {
                this.repairInfos[i].status = "正在维修中";
              } else {
                this.repairInfos[i].status = "已完成";
              }
            }
          }
        },
        (error) => {
          console.log("获取信息失败");
        }
      );
    },

    // 获取此时空闲的师傅列表
    getLeisureWorkers() {
      this.axios.get("/api/api_1_0/workerInfo/freeWorkerInfo").then(
        response=> {
          if (response.data.code === "2000") {
            this.workerInfos = response.data.data;
          }
        },
        err=> {
          console.log('获取维修信息失败');
        }
      )
    },

    // 发送当前订单的信息给服务器保存
    sendWorkerInfo() {
      let formData = new FormData();
      formData.append('workerID',this.arrangeWorkForm['workerID']);
      formData.append('repairID',this.arrangeWorkForm['repairID']);

      this.axios({
        method: "POST",
        url: '/api/api_1_0/repairInfo/arrangeWorker',
        data: formData
      }).then(
        response=> {
          if(response.data.code === "2000") {
            this.$message({
              message: '安排师傅成功',
              type: 'success'
            });
          }else {
            this.$message.error("安排师傅失败")
          }
        },
        err=> {
          console.log('更新失败');
        }
      )
      // 刷新一下页面信息
      this.getRepairInfos()
      this.getLeisureWorkers()
      this.arrangeWorkerDialog = false;
    },

    // 展示查看详情对话框
    showDetail(row) {
      // 请求查看详情当前列的所有信息
      // console.log(row.repairID);
      let rowID = 0; // 需要知道此时查看详情的是第几个维修记录
      for (let i = 0; i < this.repairInfos.length; i++) {
        if (row.repairID === this.repairInfos[i].repairID) {
          rowID = i;
          break;
        }
      }
      this.checkInfoForm.contactName = this.repairInfos[rowID].contactName;
      this.checkInfoForm.contactPhone = this.repairInfos[rowID].contactPhone;
      this.checkInfoForm.createTime = this.repairInfos[rowID].createTime;
      this.checkInfoForm.repairDetail = this.repairInfos[rowID].repairDetail;
      this.checkInfoForm.repairID = this.repairInfos[rowID].repairID;
      this.checkInfoForm.repairPlace = this.repairInfos[rowID].repairPlace;
      this.checkInfoForm.repairType = this.repairInfos[rowID].repairType;
      this.checkInfoForm.status = this.repairInfos[rowID].status;
      if (this.repairInfos[rowID].status == "未分配师傅") {
        this.checkInfoForm.workID = "未分配";
        this.checkInfoForm.worker_name = "未分配";
        this.checkInfoForm.worker_phone = "未分配";
      } else if (this.repairInfos[rowID].status == "已完成") {
        this.checkInfoForm.workID = "已完成";
        this.checkInfoForm.worker_name = "已完成";
        this.checkInfoForm.worker_phone = "已完成";
      } else {
        this.checkInfoForm.workID = this.repairInfos[rowID].workID;
        this.checkInfoForm.worker_name = this.repairInfos[rowID].worker_name;
        this.checkInfoForm.worker_phone = this.repairInfos[rowID].worker_phone;
      }
      console.log(this.checkInfoForm);

      // 展示编辑对话框
      this.checkRepairInfoDialog = true;
    },

    // 展示安排师傅的对话框,用户选择想要安排的师傅
    arrangeWorkerDetail(row) {
      this.arrangeWorkForm.workerName = ''
      this.arrangeWorkForm.workerID = ''
      this.arrangeWorkForm.repairID = ''
      this.arrangeWorkForm.workerPhone = ''
      
      this.arrangeWorkForm.repairID = row.repairID
      this.getLeisureWorkers()
      this.arrangeWorkerDialog = true;
    },

    // 完成订单
    finishOrder(row) {
      this.finishOrderForm.workerID = row.workID
      this.finishOrderForm.repairID = row.repairID
      // console.log(this.finishOrderForm);
      let formData = new FormData();
      formData.append('workerID',this.finishOrderForm['workerID']);
      formData.append('repairID',this.finishOrderForm['repairID']);

      this.axios({
        method: "POST",
        url: '/api/api_1_0/repairInfo/finishRepair',
        data: formData
      }).then(
        response=> {
          if(response.data.code === "2000") {
            this.$message({
              message: '完成维修任务！',
              type: 'success'
            });
          }else {
            this.$message.error("修改失败")
          }
        },
        err=> {
          console.log('更新失败');
        }
      )
      // 刷新一下页面信息
      this.getRepairInfos()
    },

    // 搜索
    searchOrder() {
      this.option = ''
      this.axios.get(`/api/api_1_0/repairInfo/fuzzySearch?repairDetail=${this.input}`).then(
        response => {
          this.fuzzySearchInfos = response.data.data
          this.$message({
            type: 'success',
            message: '查询成功'
          })
        },
        err=> {
          this.$message.error("查询失败")
        }
      )
    },
  },

  watch: {
    'arrangeWorkForm.workerName': {
      handler(newValue, oldValue) {
        let flag = -1
        // 找到对应师傅在第几条维修师傅信息中
        for(let i = 0; i < this.workerInfos.length; i++) {
          if(this.workerInfos[i].workerName == newValue) {
            flag = i
            break
          }
        }
        this.arrangeWorkForm.workerID = this.workerInfos[flag].workerID
        this.arrangeWorkForm.workerPhone = this.workerInfos[flag].workerPhone
      }
    },
    option: {
      handler(val) {
        this.input = ''
        this.fuzzySearchInfos = this.repairInfos.filter((info) => {
            return info.repairType.indexOf(val) !== -1
        })
      }
    }
  },

  /* computed: {
    searchInfos() {
      return this.repairInfos.filter((info) => {
        return info.repairType.indexOf(this.option) !== -1
      })
    }
  }, */

  filters: {
    // 过滤生日
    toage: function (value) {
      let birthday = new Date(value);
      let d = new Date();
      // 当前年份 - 出生年份  当前月份 < 出生月份 则 直接减 1岁  当前月份 = 出生月份 且 当前日期 < 出生日期 也减 1岁
      let age =
        d.getFullYear() -
        birthday.getFullYear() -
        (d.getMonth() < birthday.getMonth() ||
        (d.getMonth() === birthday.getMonth() &&
          d.getDate() < birthday.getDate())
          ? 1
          : 0);
      return age;
    },
  },
};
</script>

<style lang="less" scoped>
.show {
  .search {
    margin-top: 15px;
    .el-input {
      width: 300px;
      margin: 0 30px;
    }
    .el-button {
      width: 100px;
    }
  }
  .el-table {
    margin-top: 40px;
  }
}
</style>
